<template>
  <div class="elm-nav">
    <ul class="elm-nav-box border-1px" >
      <li v-for="item in tabData" class="elm-nav-list"  :key="item.id">
        <router-link class="item-nav-item"  :to="item.path" >{{item.name}}</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
    export default {
      data () {
        return {
          activeIndex: 0,
          tabData: [
            {
              'name': '商品',
              'path': '/goods'
            },
            {
              'name': '评价',
              'path': '/ratings'
            },
            {
              'name': '商家',
              'path': '/seller'
            }
          ]
        }
      },
      methods: {
        changeTab (index) {

        }
      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  /*解决在手机端1像素的问题*/
  .elm-nav-box
    width: 100%
    height: 40px
    border-1px(rgba(7,17,27,.1))
    display: flex

  .elm-nav-list
    flex: 1
    align-items: center
    justify-content: center
    text-align: center
    line-height: 40px

  .item-nav-item
     color:rgb(77,85,93)
     font-size: 14px

   .router-link-active
      color:rgb(240,20,20)
</style>
